<template>
	<view class="contianer">
		<u-navbar :title="$t('discover.Jobs')" :autoBack="false" @leftClick="goback" bgColor="#F6F6F6" titleStyle="color: #000000" placeholder>
		</u-navbar>
		<view class="content" v-if="recruitList && recruitList.length > 0">
			<view class="job-item" v-for="item in recruitList" :key="item.id">
				<view class="job-item__header">
					<text class="job-name">{{ item.position }}</text>
					<text class="job-place">{{ formatPlace(item.workPlace) }}</text>
				</view>
				<view class="job-item__salary" v-if="item.salary === null">
					<text class="light-text">{{ $t("recruit.from") }}</text>
					<text class="deep-text">
						{{ getCoinName(item.currencyId) }}{{ parseFloat(item.salaryMoney) }}
					</text>
				</view>
				<view class="job-item__salary" v-else>
					<text class="deep-text">{{ $t("recruit.Negotiable") }}</text>
				</view>
				<view class="job-item__tags">
					<view class="tag-item">
						{{ jobNatureStr(item.jobNature) }}
					</view>
					<view class="tag-item">
						{{ workingModeStr(item.workingMode) }}
					</view>
					<view class="tag-item">
						{{ workExperienceStr(item.workExperience) }}
					</view>
				</view>
				<view class="job-item__bottom">
					<view class="btn plain" v-if="item.status === 0" @click="onDelete(item)">
						{{$t("index.Delete")}}
					</view>
					<view class="btn plain" v-if="item.status === 0" @click="toEdit(item)">
						{{$t("index.Edit")}}
					</view>
					<view class="btn active" v-if="item.status === 1" @click="onRevoke(item)">
						{{$t("recruit.Revoke")}}
					</view>
				</view>
			</view>
		</view>
		<u-empty v-else :text="$t('EmptyData')" textColor="#878787" textSize="14" width="104" height="100" marginTop="80" icon="/static/image/bourse/none_order.png"></u-empty>
		<!-- 点击删除时的提示框 -->
		<CustomPopover :show="popoverShow" @cancel="()=>{popoverShow = false}" @confirm="comfirmDelete"
			:cancelBtn="$t('cancel')" :confirmBtn="$t('confirm')" :content="$t('recruit.deleteRecruit')"></CustomPopover>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	import {
		recruitmentList,
		deleteRecruitment,
		editRecruitment
	} from '@/services/recruit.js'

	import {
		formatPlace,
		jobNatureStr,
		workingModeStr,
		workExperienceStr
	} from '@/pagesDiscover/recruitment/index.js'

	import {
		getCurrencyList,
	} from '@/services/bourse.js'

	import CustomPopover from '@/components/CustomPopover.vue'

	export default {
		components: {
			CustomPopover
		},
		data() {
			return {
				recruitList: [],
				listForm: {
					pageSize: 10,
					pageNum: 1,
					isAsc: 'asc',
					userId: ''
				},
				currencyList: [],
				popoverShow: false,
				currentInfo: {},
				total: ''
			}
		},
		onLoad() {
			this.getCurrency()
			this._getRecruitmentList()
		},
		computed: {
			...mapState(['userInfo'])
		},
		onPullDownRefresh() {
			this.listForm.pageNum = 1
			this._getRecruitmentList('Refresh')
		},
		onReachBottom() {
			if (this.total > this.listForm.pageNum * this.listForm.pageSize) {
				this.listForm.pageNum++;
				this._getRecruitmentList();
			}
		},
		methods: {
			formatPlace,
			jobNatureStr,
			workingModeStr,
			workExperienceStr,
			goback() {
				uni.redirectTo({
					url: '/pagesUser/posted/Posted'
				})
			},

			/**
			 * 编辑招聘信息，通过传递id鉴别
			 */
			toEdit(item) {
				uni.navigateTo({
					url: `/pagesDiscover/recruitment/RecruitmentRelease?id=${item.id}`
				})
			},
			onDelete(item) {
				this.popoverShow = true
				this.currentInfo = item
			},
			/**
			 * 删除招聘信息
			 */
			async comfirmDelete() {
				uni.showLoading()
				const {
					success
				} = await deleteRecruitment(this.currentInfo.id)
				uni.hideLoading()
				this.popoverShow = false
				if (success) {
					this.listForm.pageNum = 1
					this._getRecruitmentList()
				}
				console.log(this.currentInfo);
			},
			/**
			 * 下架招聘信息
			 */
			async onRevoke(item) {
				uni.showLoading()
				let data = {
					...item
				}
				data.status = 0
				// const data = {
				// 	id: item.id,
				// 	status: 0
				// }
				const {
					success
				} = await editRecruitment(data)
				uni.hideLoading()
				if (success) {
					this.listForm.pageNum = 1
					this._getRecruitmentList()
				}
			},
			/**
			 * 获取招聘列表
			 */
			async _getRecruitmentList(val) {
				this.listForm.userId = this.userInfo.userId
				this.loading = true
				if (val !== 'Refresh') {
					uni.showLoading()
				}
				const {
					success,
					result
				} = await recruitmentList(this.listForm)
				// this.loading = false
				if (val !== 'Refresh') {
					uni.hideLoading()
				} else {
					uni.stopPullDownRefresh();
				}
				this.listForm.pageNum == 1 ?
					this.recruitList = result.rows :
					this.recruitList = [...this.recruitList, ...result.rows]
				this.total = result.total
			},
			/**
			 * 获取系统货币
			 */
			async getCurrency() {
				const {
					success,
					result
				} = await getCurrencyList()
				if (success) {
					this.currencyList = result.data
				}
			},

			/**
			 * @param {Number} currencyId 根据货币Id 获取货币的符号
			 */
			getCoinName(currencyId) {
				const coinIndex = this.currencyList.findIndex(
					(value) => String(value.id) === String(currencyId)
				)
				return coinIndex !== -1 ? this.currencyList[coinIndex].symbol : ''
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 30rpx 30rpx 1rpx;

		.job-item {
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 20rpx 20rpx 0;
			font-family: HarmonyOS Sans-Medium, HarmonyOS Sans;
			font-weight: 400;

			&__header {
				display: flex;
				justify-content: space-between;

				.job-name {
					font-size: 32rpx;
					font-weight: 500;
					color: #000000;
					line-height: 48rpx;
				}

				.job-place {
					font-size: 24rpx;
					color: #878787;
					line-height: 48rpx;
				}
			}

			&__salary {
				margin-top: 10rpx;

				.light-text {
					font-size: 24rpx;
					color: #878787;
					line-height: 36rpx;
				}

				.deep-text {
					font-size: 28rpx;
					color: #FE6600;
					line-height: 36rpx;

				}

				.light-text+.deep-text {
					margin-left: 6rpx;
				}
			}

			&__tags {
				display: flex;
				margin-top: 12rpx;

				.tag-item {
					background: #EBFAF8;
					border-radius: 8rpx;
					font-size: 20rpx;
					color: #61BDB2;
					padding: 6rpx 8rpx;
					height: 34rpx;
					line-height: 30rpx;
					margin-right: 10rpx;
				}
			}

			&__bottom {
				margin-top: 22rpx;
				border-top: 2rpx solid rgba(0, 0, 0, 0.05);
				display: flex;
				justify-content: flex-end;
				padding: 20rpx 0;
				margin-bottom: 30rpx;

				.btn {
					box-sizing: border-box;
					height: 64rpx;
					border-radius: 64rpx;
					opacity: 1;
					border: 2rpx solid rgba(135, 135, 135, 0.6);
					line-height: 60rpx;
					padding: 0 24rpx;
					font-size: 28rpx;
					color: #878787;
				}

				.active {
					background: #61BDB2;
					border: 2rpx solid #61BDB2;
					color: #FFFFFF;
				}

				.btn+.btn {
					margin-left: 20rpx;
				}
			}
		}
	}
</style>